<script lang="ts" setup>
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import { bizType, paymentType } from '@/utils/formatter'
import { copyEvent } from '@/utils'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import { useTable } from '@/hooks/useTable'
import {
  queryUserInfoDetailOrderRequestData,
  ChargeDetailOrderTableCol,
  queryUserInfoDetailOrderTableCol
} from '@/api/user/types/user'
import { reactive, onMounted, onActivated, defineAsyncComponent, ref } from 'vue'
import { queryUserInfoDetailOrder } from '@/api/user'
import { getToken } from '@/utils/cache/cookies'
const route = useRoute()
const router = useRouter()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: route.query.phone as string,
  orderId: route.query.orderId as string,
  type: '',
  selectType: 'charge'
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
onMounted(() => {
  load()
})
onActivated(() => {
  form.phone = route.query.phone as string
  form.orderId = route.query.orderId as string
})
const handleFormSearch = () => {
  if (form.phone !== route.query.phone) {
    router.push({
      name: 'ChargeOrder',
      query: {
        phone: form.phone,
        orderId: form.orderId,
        type: form.type,
        selectType: 'charge'
      }
    })
    return
  }
  setCurrentPage(1)
  load()
}
defineExpose({ load })

const RefundBalanceApplicationDialog = defineAsyncComponent(
  () => import('@/components/dialog/RefundBalanceApplication.vue')
)
const RefundBalanceApplicationDialogRef = ref<InstanceType<
  typeof RefundBalanceApplicationDialog
> | null>(null)
const openBalanceRecharge = (row: ChargeDetailOrderTableCol) => {
  RefundBalanceApplicationDialogRef.value?.setData(
    row.orderId,
    row.createdTime,
    row.remainRefundAmount,
    row.userId,
    row.balance,
    row.orderAmount
  )
  RefundBalanceApplicationDialogRef.value?.open()
}
</script>

<template>
  <user-info-form v-model="form" type="charge" @search="handleFormSearch">
    <template #select>
      <el-form-item prop="type" label="充值类型">
        <el-select v-model="form.type" style="width: 150px">
          <el-option value="" label="不限" />
          <el-option value="BikeLongTerm" label="车辆长租" />
          <el-option value="ChangeBattery" label="换电套餐" />
          <el-option value="BatteryActivity" label="电池套餐" />
          <el-option value="BatteryTimesCard" label="电池次卡" />
          <el-option value="BikeOverdue" label="租车逾期" />
          <el-option value="BatteryOverdue" label="电池逾期" />
          <el-option value="BatteryRerent" label="电池续租" />
          <el-option value="BikeRerent" label="车辆续租" />
          <el-option value="BikeOverdueRerent" label="租车逾期续租" />
          <el-option value="BatteryOverdueRerent" label="电池逾期续租" />
          <el-option value="bikeModified" label="中控线材(车辆改装)" />
          <el-option value="Battery" label="电池购买" />
          <el-option value="BalanceRecharge" label="余额充值" />
        </el-select>
      </el-form-item>
    </template>
  </user-info-form>
  <el-table v-loading="loading" class="no-border" :data="data as ChargeDetailOrderTableCol[]">
    <el-table-column prop="mobilePhone" label="手机号" min-width="150" align="center" />
    <el-table-column prop="bizType" label="充值类型" :formatter="bizType" align="center" />
    <el-table-column prop="discountAmount" label="优惠券抵扣" min-width="110" align="center" />
    <el-table-column prop="orderAmount" label="实付金额" align="center" />
    <el-table-column prop="paymentType" label="充值方式" :formatter="paymentType" align="center" />
    <el-table-column prop="orderId" label="充值订单号" min-width="250" align="center" />
    <el-table-column prop="createdTime" label="充值时间" min-width="200" align="center">
      <template #default="scope">
        <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center">
      <template #default="scope">
        <div class="flex-column">
          <div v-if="scope.row.remark !== '-'">
            {{ scope.row.remark }}
          </div>
          <div v-if="scope.row.bizType == 'BikeOverdue' || scope.row.bizType == 'BatteryOverdue'">
            归属订单:{{ scope.row.originOrderId }}
            <el-button type="primary" link @click="copyEvent(scope.row.originOrderId)"
              >复制</el-button
            >
          </div>
          <div
            v-else-if="
              scope.row.bizType == 'BatteryRerent' ||
              scope.row.bizType == 'BikeRerent' ||
              scope.row.bizType == 'BikeOverdueRerent' ||
              scope.row.bizType == 'BatteryOverdueRerent'
            "
          >
            原订单:{{ scope.row.originOrderId }}
            <el-button type="primary" link @click="copyEvent(scope.row.originOrderId)"
              >复制</el-button
            >
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          type="primary"
          v-if="scope.row.bizType == 'BalanceRecharge'"
          link
          @click="openBalanceRecharge(scope.row)"
          >退余额</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <refund-balance-application-dialog ref="RefundBalanceApplicationDialogRef" @refresh="load" />
</template>

<style scoped></style>
